<template>
	<view>
		<u-navbar placeholder fixed autoBack border title="工资管理">
			<view slot="right" @click="search"><u-icon name="search" size="20" color="#162233"></u-icon></view>
		</u-navbar>
		<d-select :options="options" @query="searchData"></d-select>

		<view class="d-p-30">
			<view class="card d-p-30" v-if="count">
				<view class="d-flex">
					<view class="d-font-32 d-flex-1" style="font-weight: bold;color: #323334;">工资概览</view>
					<view class="d-font-24" style="color: #ADB4BD;">单位：人</view>
				</view>
				<view class="d-flex d-m-t-20 d-font-24 d-text-center" style="color: #4E5C70;">
					<view class="d-flex-1" v-for="(item, index) in count" :key="index">
						<view>{{ item.projectType }}</view>
						<view class="d-m-t-10" style="color: #21A5F3;font-weight: bold;font-size: 42rpx;">{{ item.staffs }}</view>
					</view>
				</view>
			</view>

			<view class="card d-m-t-30 d-p-30" v-if="count">
				<view class="d-flex d-m-b-30">
					<!-- <view>
						<view></view>
						<view>项目统计</view>
					</view> -->
					<view class="sub-title d-font-30 d-flex-1" style="color: #0882F3;">
						工资发放情况
						<text class="d-m-l-20 d-font-24" style="color: #ADB4BD;">(单位: 万元)</text>
					</view>
					<view class="d-font-26 d-flex" style="color: #505355;" @click="show = true">
						<text class="d-m-r-10" style="position: relative;top: -2rpx;">{{ dateStr }}</text>
						<u-icon name="arrow-down" size="26rpx" color="#505355"></u-icon>
					</view>
				</view>
				<wagesChart :count="count"></wagesChart>
			</view>

			<view class="d-font-32 d-m-t-40" style="font-weight: bold;color: #323334;">工资信息</view>
			<template v-if="list && list.length > 0">
				<view class="card d-p-30 d-m-t-30" v-for="(item, index) in list" :key="index" @click="wagesDetail(item)">
					<view class="d-flex">
						<view class="d-font-28 d-flex-1" style="color: #151C24;font-weight: bold;">{{ item.gcmc }}</view>
					</view>
					<view class="d-flex d-m-t-20 d-font-24" style="color: #5D6672;">
						<view class="d-flex-1">
							<text>属地类型</text>
							<text class="d-m-l-20" style="color: #162233;">{{ item.districtName }}</text>
						</view>
						<view class="d-flex-1">
							<text>工资发放月(最近)</text>
							<text class="d-m-l-20" style="color: #162233;">{{ item.ffgzny }}</text>
						</view>
					</view>
					<view class="d-flex d-m-t-20 d-font-24" style="color: #5D6672;">
						<view class="d-flex-1">
							<text>最近发放人数</text>
							<text class="d-m-l-20" style="color: #162233;">{{ item.staffs }}</text>
						</view>
						<view class="d-flex-1">
							<text>最近发放金额</text>
							<text class="d-m-l-20" style="color: #162233;">{{ item.salary }}</text>
						</view>
					</view>
					<view class="d-flex d-m-t-20 d-font-24" style="color: #5D6672;">
						<view class="d-flex-1">
							<text>累积发放次数</text>
							<text class="d-m-l-20" style="color: #162233;">{{ item.cumtimes }}</text>
						</view>
						<view class="d-flex-1">
							<text>累积发放人数</text>
							<text class="d-m-l-20" style="color: #162233;">{{ item.cumstaffs }}</text>
						</view>
					</view>
					<view class="d-flex d-m-t-20 d-font-24" style="color: #5D6672;">
						<view class="d-flex-1">
							<!-- todo 无 -->
							<text>累积发放金额</text>
							<text class="d-m-l-20" style="color: #162233;">{{ item.cumsalary }}</text>
						</view>
					</view>
				</view>
			</template>
			<template v-else>
				<view class="d-p-30"><u-empty icon="/static/image/none.png" text="暂无数据"></u-empty></view>
			</template>
		</view>
		<u-datetime-picker
			:value="dateStr"
			:maxDate="maxDate"
			title="请选择"
			closeOnClickOverlay
			:show="show"
			@close="show = false"
			@cancel="show = false"
			@confirm="setDate"
			mode="year-month"
		></u-datetime-picker>
	</view>
</template>

<script>
import wagesChart from '../components/wagesChart.vue';
import { salaryByPtype, salaryProject, dictList, appNation } from '../../../common/api.js';
export default {
	components: {
		wagesChart
	},
	data() {
		return {
			pageNum: 1,
			pageSize: 1,
			pageLast: 1,
			list: [],
			options: [],
			info: null,
			queryParams: {},
			show: false,
			dateStr: '',
			count: null,
			maxDate: 0
		};
	},
	onLoad() {
		this.maxDate = new Date().getTime();
		this.dateStr = this.$moment().format('YYYY-MM');
		this.init();
	},
	onReachBottom() {
		if (this.pageLast > this.pageNum) {
			++this.pageNum;
			this.getList().then(e => {
				this.list = this.list.concat(e.data);
			});
		}
	},
	methods: {
		init() {
			let district, xmtype;
			appNation()
				.then(e => {
					district = e.data.map(e => {
						return {
							id: e.districtId,
							label: e.districtName
						};
					});
				})
				.then(() => {
					// 项目类型
					return dictList({
						type: 'xmtype'
					}).then(e => {
						xmtype = e.data.map(e => {
							return {
								id: e.dictValue,
								label: e.dictLabel
							};
						});
					});
				})
				.then(() => {
					this.options = [
						{
							label: '属地',
							name: 'districtId',
							children: district
						},
						{
							label: '项目类型',
							name: 'xmtype',
							children: xmtype
						}
					];
				})
				.then(() => {
					this.getData();
				});
		},
		setDate(e) {
			this.dateStr = this.$moment(e.value).format('YYYY-MM');
			this.show = false;
			this.salaryByPtype();
		},
		getData() {
			this.salaryByPtype();
			this.pageNum = 1;
			this.getList().then(e => {
				this.list = e.data;
				this.pageLast = Math.ceil(e.total / this.pageSize);
			});
		},
		salaryByPtype() {
			salaryByPtype({
				params: {
					...this.queryParams,
					deptId: this.$user.deptId,
					salaryDate: this.dateStr
				}
			}).then(e => {
				this.count = e.data;
			});
		},
		getList() {
			return salaryProject({
				params: {
					...this.queryParams,
					deptId: this.$user.deptId,
					pageNum: this.pageNum,
					pageSize: this.pageSize
				}
			});
		},
		search() {
			uni.$u.route({
				url: '/pages/index/wages/search'
			});
		},
		wagesDetail(item) {
			uni.$u.route({
				url: '/pages/index/wages/wagesDetail',
				params: {
					id: item.id
				}
			});
		},
		searchData(e) {
			this.queryParams = e;
			this.getData();
		}
	}
};
</script>

<style lang="scss">
.card {
	box-shadow: 0rpx 5rpx 10rpx rgba(0, 0, 0, 0.05);
	border-radius: 10rpx;
	background-color: #ffffff;
}
page {
	background-color: #fbfcfc;
}
</style>
